<template>
<div>
    <el-date-picker
      v-model="datas"
      clearable
      type="daterange"
      start-placeholder="开始日期"
      @change="getDate"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
    点我打开
  </el-button>
  <div style="margin-top:100px">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div style="width:200px;height:200px;background-color:red">

        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <div style="width:200px;height:200px;background-color:blue">

        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</div>
    
</template>
<script>
  export default {
    name:'Time',
    data() {
      return {
        datas:'',
        finalTime:'',
        drawer: false,
        activeName: 'first',
        direction: 'rtl',
        pickerOptions:{
          disabledDate:(time)=>{
            var data = 'Thu Jun 01 2020 00:00:00 GMT+0800 (中国标准时间)'
            let nowDate = new Date(data);
            return time.getTime() < nowDate || time.getTime() > this.finalTime
          }
        }
      };
    },
    created() {
      this.finalTime = new Date(this.getTimer())
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab.label);
        console.log(event);
      },
     getDate() {

     },
     handleClose(done) {
       done()
      },
     //获取当前年月日星期几几点几分几秒并打印
     getTimer() {
       var date = new Date()
       var year = date.getFullYear()
       var month = date.getMonth() + 1
       var datee = date.getDate()
       var time = year + '/' + month + '/' + datee + ' ' + 23 + ':' + 59 + ':' + 59
       return time
     }
    }
  }
</script>
<style lang="" scoped>
  
</style>
<style>
  .el-drawer {
    width: 50% !important;
    top: unset !important;
    height: 91% !important;
  }
</style>